<template>
  <div>
    <FormItem prop="name">
      <span slot="label">注册姓名 ：</span>
      <Input type="text" v-model="value.name" placeholder="注册姓名"/>
    </FormItem>
    <FormItem prop="tel">
      <span slot="label">注册电话 ：</span>
      <Input type="text" v-model="value.tel" placeholder="注册电话"/>
    </FormItem>
    <FormItem prop="registDate">
      <span slot="label">注册日期 ：</span>
      <DatePicker type="date" v-model="value.inputDate" placeholder="注册日期"/>
    </FormItem>
    <FormItem prop="address" class="allRow">
      <span slot="label">注册地址 ：</span>
      <Input type="text" v-model="value.address" placeholder="详细地址"/>
    </FormItem>
    <FormItem prop="type">
      <span slot="label">类型 ：</span>
      <Select placeholder="选择类型" v-model="value.type" >
        <Option v-for="(option, index) in typeList" :value="option.key" :key="index" >
            {{ option.value }}
        </Option>
      </Select>
    </FormItem>
    <FormItem prop="status">
      <span slot="label">状态 ：</span>
      <Select placeholder="选择状态" v-model="value.status" >
        <Option v-for="(option, index) in statusList" :value="option.key" :key="index" >
            {{ option.value }}
        </Option>
      </Select>
    </FormItem>
    <FormItem prop="tags">
      <span slot="label">标签 ：</span>
      <Select placeholder="选择标签" v-model="value.tags" >
        <Option v-for="(option, index) in tagList" :value="option.key" :key="index" >
            {{ option.value }}
        </Option>
      </Select>
    </FormItem>
  </div>
</template>
<script>
export default {
  name: 'formItemList',
  props: {
    value: {
      desc:'表单对象',
      type: Object,
      required:true,
      default:()=>{return {}},
    }
  },
  data() {
    return {
      statusList: [
        {
          key: "有效",
          value: "有效"
        },{
          key: "注销",
          value: "注销"
        },{
          key: "异常",
          value: "异常"
        }
      ],
      tagList:[
        {
          key: "git",
          value: "git"
        },{
          key: "npm",
          value: "npm"
        },{
          key: "spring",
          value: "spring"
        },{
          key: "vue",
          value: "vue"
        },{
          key: "css",
          value: "css"
        },
      ],
      typeList: [
        {
          key: "js",
          value: "js"
        },{
          key: "java",
          value: "java"
        },{
          key: "php",
          value: "php"
        },{
          key: "go",
          value: "go"
        },{
          key: "c++",
          value: "c++"
        },{
          key: "其它",
          value: "其它"
        }
      ],
    };
  },
  methods: {
    getTags() {},
    getScopes() {},
    scopeChange(d){
       this.value.businessScopeList = d.map(a=>{return {id:a};});
    },
    selectAddress(p) {
      this.value.address.province = p[0];
      this.value.address.city = p[1];
      this.value.address.area = p[2];
      this.value.address.street = p[3];
    },
  }
};
</script>



